<template>
 <section class="cart_module">
   <section class="cart_button" v-if="!foods.specifications.length">
     <transition name="showReduce">
       <span>
        <i class="cart-minus fa fa-minus-circle" @click.stop="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)" v-if="foodNum"></i>
       </span>
     </transition>
     <transition name="fade">
       <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
     </transition>
     <i class="add_icon fa fa-plus-circle" @click.stop="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)"></i>
   </section>
   <section v-else class="choose_specification">
     <section class="choose_icon_container">
       <transition name="showReduce">
         <i class="cart-minus fa fa-minus-circle" v-if="foodNum" @click.stop="showReduceTip"></i>
       </transition>
       <transition name="fade">
         <span class="cart_num"  v-if="foodNum">{{foodNum}}</span>
       </transition>
       <span class="show_chooselist"  @click="showChooseList(foods)">选规格</span>
     </section>
   </section>
 </section>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
import {mapGetters, mapMutations} from 'vuex'
  export default {
  props:{
    foods:{
      type:Object,
      default:''
    },
    shopId:{
      type:Number,
      default:''
    }
  },
  data(){
     return{
       showMoveDot: [], //控制下落的小圆点显示隐藏
    }
   },
   created(){
   },
   mounted(){
   },
   computed: {
     ...mapGetters([
       'cartList'
     ]),
     /**
      * 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
      */
     shopCart: function (){
       return Object.assign({},this.cartList[this.shopId]);
     },
     //shopCart变化的时候重新计算当前商品的数量
     /*var obj = { foo: "bar", baz: 42 };
     console.log(Object.values(obj))// ['bar', 42]*/
     foodNum: function (){
       let category_id = this.foods.category_id;
       let item_id = this.foods.item_id;
       if (this.shopCart&&this.shopCart[category_id]&&this.shopCart[category_id][item_id]) {
         let num = 0;
         Object.values(this.shopCart[category_id][item_id]).forEach((item,index) => {
           num += item.num;
         })
         return num;
       }else {
         return 0;
       }
     },
   },
   methods: {
     ...mapMutations([
       'ADD_CART','REDUCE_CART',
     ]),
     addToCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock, event){
       this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
       // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
       let elLeft = event.target.getBoundingClientRect().left;
       let elBottom = event.target.getBoundingClientRect().bottom;
       //控制下落的小圆点显示隐藏
       this.showMoveDot.push(true);
       this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
     },
     //移出购物车
     removeOutCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
       if (this.foodNum > 0) {
         this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
       }
     },
     //显示规格列表弹窗
     showChooseList(foods){
       this.$emit('showChooseList',foods)
     },
     showReduceTip(){
       this.$emit('showReduceTip');
     }
   },
   components:{
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../../style/mixin';
@import "../../../style/css/font-awesome.min.css";
.cart_module{
  .add_icon,.cart-minus{
    position: relative;
    z-index: 999;
    font-size: .8rem;
    color: $blue;
  }
  .cart_button{
    display: flex;
    align-items: center;
  }
  svg{
    @include wh(.9rem, .9rem);
    fill: #3190e8;
  }
  .specs_reduce_icon{
    fill: #999;
  }
  .cart_num{
    @include sc(.65rem, #666);
    min-width: 1rem;
    text-align: center;
    font-family: Helvetica Neue,Tahoma;
  }
  .choose_specification{
    .choose_icon_container{
      display: flex;
      align-items: center;
      .show_chooselist{
        display: block;
        @include sc(.55rem, #fff);
        padding: .1rem .2rem;
        background-color: $blue;
        border-radius: 0.2rem;
        border: 1px solid $blue;
      }
    }
  }
}
.showReduce-enter-active, .showReduce-leave-active {
  transition: all .9s ease-out;
}
.showReduce-enter, .showReduce-leave-active {
  opacity: 0;
  transform: translateX(1rem);
  transform: rotate(-90deg);
}
.fade-enter-active, .fade-leave-active {
  transition: all .3s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}
.fadeBounce-enter-active, .fadeBounce-leave-active {
  transition: all .3s;
}
.fadeBounce-enter, .fadeBounce-leave-active {
  opacity: 0;
  transform: scale(.7);
}
</style>
